<template>
	<view class="padding30">
		<view class="fs24 fw-500 mt30">真实姓名</view>
		<u-input v-model="query.wechat" :type="type" placeholder='请输入真实姓名' v-if='from==1'/>
		<u-input v-model="query.alipay" :type="type" placeholder='请输入真实姓名' v-else/>
		<view class="lineBox"></view>
		<view class="fs24 fw-500 mt30">{{title}}</view>
		<image :src="showImg" class="w188 h188 mt30" @click="update" v-if="showImg"></image>
		<view class="picBox mt30 flex col-center row-center" @click="update" v-else>
			<u-icon name="plus-circle" size="48" color="#CDCDCD"></u-icon>
		</view>
		<!-- 底部按钮 -->
		<view class="fw-500 footerBtn pl30 pr30 bg-f pt20 pb70">
			<u-button type="primary" shape="circle" @click="submit">立即绑定</u-button>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:'bangding',
		computed:{...mapState('m_user',['userInfo'])},
		onLoad(opt) {
			this.from = opt.from
			if (opt.from == 1) {
				uni.setNavigationBarTitle({
					title: '绑定微信'
				})
				this.query.wechat=this.userInfo.wechat
				this.query.wechat_img=this.userInfo.wechat_img
				this.showImg=this.userInfo.wechat_img_path
				this.title='微信收款码'
			} else {
				uni.setNavigationBarTitle({
					title: '绑定支付宝'
				})
				this.title='支付宝收款码'
				this.query.alipay=this.userInfo.alipay
				this.query.alipay_img=this.userInfo.alipay_img
				this.showImg=this.userInfo.alipay_img_path
			}
		},
		data() {
			return {
				// from==1绑定微信   from==2绑定支付宝
				from: '',
				title:'',
				type: 'text',
				query: {
					wechat: '',
					wechat_img:'',
					alipay:'',
					alipay_img:''
				},
				showImg:''
			};
		},
		methods:{
			...mapMutations('m_user',['getUserInfo']),
			//上传图片
			update() {
				this.$tool.upload().then(res=>{
					console.log(res)
					if(this.from==1) {
						this.query.wechat_img=res.id
					}else {
						this.query.alipay_img=res.id
					}
					
					this.showImg=res.showImg
				})
			},
			//提交
			submit() {
				let api = ''
				if(this.from==1) {
					api ='binding_wechat'
					delete this.query.alipay
					delete this.query.alipay_img
				}else {
					api = 'binding_alipay'
					delete this.query.wechat
					delete this.query.wechat_img
				}
				this.$api[api](this.query).then(res=>{
					console.log(res)
					this.$msg(res.msg)
					this.getUserInfo()
					setTimeout(()=>{
						uni.navigateBack({
							
						})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		
	}
	.lineBox {
		height: 2rpx;
		background: #C1C0C9;
	}
	.picBox {
		width: 188rpx;
		height: 188rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #CDCDCD;
	}
</style>
